<template>
  <div id="app">
    <SceneLaunchScreen v-if="scene === 'launch-screen'" @end="play"></SceneLaunchScreen>
    <ScenePlayPlot v-if="scene === 'play-plot'" @end="play"></ScenePlayPlot>
    <ScenePlayMain v-if="scene === 'play-main'"></ScenePlayMain>
  </div>
</template>

<script>
import Game from './game/game'

import SceneLaunchScreen from './components/SceneLaunchScreen'
import ScenePlayPlot from './components/ScenePlayPlot'
import ScenePlayMain from './components/ScenePlayMain'

import { mapState } from 'vuex'

export default {
  name: 'app',

  components: {
    SceneLaunchScreen,
    ScenePlayPlot,
    ScenePlayMain
  },

  data() {
    return {
      scenez: 'w'
    }
  },

  computed: {
    ...mapState([
      'scene'
    ])
  },

  mounted() {
    let loading = document.querySelector('.main-loading')
    loading.parentNode.removeChild(loading)
    document.querySelector('#app').style.display = 'block'
    this.$store.commit('updateScene', 'launch-screen')
    // Game.init(this)
  },

  methods: {
    play() {
      Game.init(this)
    },
  }
}
</script>

<style lang="scss">
@import '@/assets/scss/style.scss';
</style>
